<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素和css类</title>
    <!--伪元素和CSS类-->
    <!--伪元素可以结合CSS类：-->
    <!--p.article:first-letter {color:#ff0000;}-->
    <!--<p class="article">文章段落</p>-->
    <!--上面的例子会使所有 class 为 article 的段落的首字母变为红色。-->
    <!--多个伪元素-->
    <!--可以结合多个伪元素来使用。-->
    <!--在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。-->
    <!--段落中的其余文本将以默认字体大小和颜色来显示：-->
    <style>
        p:first-letter
        {
            color: #FF0000;
            font-size: xx-large;
        }
        p:first-line
        {
            color: #0000FF;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
<p>你可以结合使用“first-line”和”first-letter“伪元素向文本的首行和首字母设置特殊样式。</p>
</body>
</html>